<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Emoji</title>
    <link rel="stylesheet" href="index.css" type="text/css">
</head>

<body>
    <div class="container">
        <div class="face">
            <div class="eyes">
                <div class="eye"></div>
                <div class="eye"></div>
            </div>
        </div>
        <div class="hat-container">
            <div class="hat">
            </div>
            <div class="hat-peak"></div>
        </div>
    </div>

    <script>
        document.querySelector("body")
            .addEventListener("mousemove", eyeball);
        function eyeball() {
            var eye = document.querySelectorAll(".eye");
            eye.forEach(eye => {
                let x = (eye.getBoundingClientRect()
                    .left) + (eye.clientWidth / 2);
                let y = (eye.getBoundingClientRect()
                    .top) + (eye.clientHeight / 2);
                let radian = Math.atan2(event.pageX -
                    x, event.pageY - y);
                let rot = (radian * (180 / Math.PI) *
                    -1) + 270;
                eye.style.transform = "rotate(" + rot
                    + "deg)";
            });
        }
    </script>
</body>

</html>